<section id="report_bi">
  <hl-page-header title="运营状态统计表">
    <hl-button type="outline" @on-click="incomeExport" v-if="quanxian.includes('c1002')">导出</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
		<div class="pull-left">
			<hl-radio-button :width="96" :data="listMenu" v-model="selectedStarProject" @on-select-item="selectStarPro" merge></hl-radio-button>
		</div>
    <div class="pull-right" style="width: 120px;margin: 10px 0;">
      <web-calendar v-model="payment_begin_time" tips="起始时间" @change="pagination" left-right="right"></web-calendar>
    </div> 
  </div>

  <div class="rent-content br-4 global_table" style="padding:0;">
    <table cellpadding="0" cellspacing="0" border="0" v-if="selectedStarProject.includes('BU')">
      <thead>
        <tr class="global_table_title">
          <th rowspan="2">序</th>
          <th rowspan="2">项目名称</th>
          <th rowspan="2">总建筑面积(m²)</th>
          <th rowspan="2">可租赁总面积(m²)</th>         
          <th colspan="7">办公</th>
          <th colspan="7">商铺</th>       
        </tr>
        <tr class="global_table_title">
					<th>自用面积(m²)</th>
					<th>可租赁面积(m²)</th>
					<th>空置面积(m²)</th>
					<th>已租赁面积(m²)</th>
					<th>出租率</th>
					<th>平均日租金(元)</th>
					<th>平均日净租金(元)</th>
					<th>自用面积(m²)</th>
					<th>可租赁面积(m²)</th>
					<th>空置面积(m²)</th>
					<th>已租赁面积(m²)</th>
					<th>出租率</th>
					<th>平均日租金(元)</th>
					<th>平均日净租金(元)</th>
        </tr>
        <thead>
        <tbody>
          <tr v-for="(item, index) in unitData">
						<td>{{index+1}}</td>
						<td>{{item.projectName}}</td>
						<td>{{item.acreage}}</td>
						<td>{{item.tenantableAcreage}}</td>
						<td>{{item.bgInfo ? item.bgInfo.zyAcreage : '--'}}</td>
						<td>{{item.bgInfo ? item.bgInfo.tenantableAcreage : '--'}}</td>
						<td>{{item.bgInfo ? item.bgInfo.vaAcreage : '--'}}</td>
						<td>{{item.bgInfo ? item.bgInfo.rentAcreage : '--'}}</td>
						<td>{{item.bgInfo ? item.bgInfo.rentRate : '--'}}%</td>
						<td>{{item.bgInfo ? item.bgInfo.darlyRental : '--'}}</td>
						<td>{{item.bgInfo ? item.bgInfo.darlyNetRental : '--'}}</td>
						<td>{{item.spInfo ? item.spInfo.zyAcreage : '--'}}</td>
						<td>{{item.spInfo ? item.spInfo.tenantableAcreage : '--'}}</td>
						<td>{{item.spInfo ? item.spInfo.vaAcreage : '--'}}</td>
						<td>{{item.spInfo ? item.spInfo.rentAcreage : '--'}}</td>
						<td>{{item.spInfo ? item.spInfo.rentRate : '--'}}%</td>
						<td>{{item.spInfo ? item.spInfo.darlyRental : '--'}}</td>
						<td>{{item.spInfo ? item.spInfo.darlyNetRental : '--'}}</td>
					</tr>
        </tbody>
    </table>
		<table style="width: 100%;" cellpadding="0" cellspacing="0" border="0" v-if="selectedStarProject.includes('WP')">
		  <thead>		   
		    <tr class="global_table_title">
					<th>序</th>
					<th>项目名称</th>
					<th>工位总数(个)</th>
					<th>自用个数(个)</th>
					<th>可租个数(个)</th>
					<th>已租个数(个)</th>
					<th>出租率</th>
					<th>平均日租金(元)</th>
					<th>平均日净租金</th>
		    </tr>
		    <thead>
		    <tbody>
		      <tr v-for="(item, index) in stwpData">
						<th>{{index+1}}</th>
						<th>{{item.projectName}}</th>
						<th>{{item.totalCount}}</th>
						<th>{{item.zyCount}}</th>
						<th>{{item.tenantableCount}}</th>
						<th>{{item.rentCount}}</th>
						<th>{{item.rentRate}}%</th>
						<th>{{item.darlyRental}}</th>
						<th>{{item.darlyNetRental}}</th>
					</tr>
		    </tbody>
		</table>
		<table style="width: 100%;" cellpadding="0" cellspacing="0" border="0" v-if="selectedStarProject.includes('ST')">
		  <thead>		   
		    <tr class="global_table_title">
					<th>序</th>
					<th>项目名称</th>
					<th>车位总数(个)</th>
					<th>自用个数(个)</th>
					<th>可租个数(个)</th>
					<th>已租个数(个)</th>
					<th>出租率</th>
					<!-- <th>平均日租金(元)</th>
					<th>平均日净租金</th> -->
		    </tr>
		    <thead>
		    <tbody>
		      <tr v-for="(item, index) in stwpData">
		      	<th>{{index+1}}</th>
		      	<th>{{item.projectName}}</th>
		      	<th>{{item.totalCount}}</th>
		      	<th>{{item.zyCount}}</th>
		      	<th>{{item.tenantableCount}}</th>
		      	<th>{{item.rentCount}}</th>
		      	<th>{{item.rentRate}}%</th>
		      	<!-- <th>{{item.darlyRental}}</th>
		      	<th>{{item.darlyNetRental}}</th> -->
		      </tr>
		    </tbody>
		</table>
  </div>

  <!-- <div class="user-page ptb-10 clearfix">
      <div class="pull-left user-page-num">
        <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
        <span>每页
				<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>

        条</span>
      </div>
      <div class="pull-right">
        <hl-pagination v-model="currentPage" :total="totalPage" @change="pagination"></hl-pagination>
      </div>
    </div> -->


</section>

<script src="modules/report_bi/scripts/operating-statistics.js" charset="utf-8"></script>

<style media="screen">
  .icon-Gm-calendar:before {
    right: 0;
    top: 0;
  }

  input::-webkit-input-placeholder {
    color: #999;
  }

  input:-moz-placeholder {
    color: #999;
  }

  input:-ms-input-placeholder {
    color: #999;
  }
	
	.head-container{
	  position: relative;
	  padding: 10px 0 14px;
	}
	.head-container .mes{
	  overflow: hidden;
	  margin-right: 10px;
	  float: left;
	}
	.head-container .mes p{
	  font-size: 12px;
	  color:#CFCFCF;
	  margin-bottom: 6px;
	}
	.head-container .mes input{
	  width: 220px;
	  height: 34px;
	}
	.head-container .flow{
	  float: left;
	  margin-right: 10px;
	}
	.head-container .flow p{
	  font-size: 12px;
	  color:#CFCFCF;
	  margin-bottom: 6px;
	}
	.head-container .flow .flow-select{
	  width: 140px;
	  height: 34px;
	}
	.head-container .button-group{
	  padding-top: 23px;
	}
	.hl-date-text{
	  box-shadow: none;
	  height: 34px;
	  padding-left: 4px;
	  background-color: #F9F9F9;
	  border-radius: 4px;
	  border: none;
	}
</style>
